<template>
  <ul class='list'>
        <li class='item' 
            v-for='item of letters' 
            :key='item' 
            @click='handleClick'
            :ref="item"
            @touchstart.prevent="handleTouchStart"
            @touchmove="handleTouchMove"
            @touchend="handleTouchEnd"
        >
                {{item}}
            </li>
  </ul>
</template>

<script>

export default {
        name: 'CityAlphabet',
        props:{
            cities:Object
        },
        data:function(){
            return {
                touchStatus: false
            }
        },
        computed: {
            letters () {
            const letters = []
            for (let i in this.cities) {
                letters.push(i)
            }
            return letters
            }
        },
        methods:{
            handleClick (e) {
                this.$emit('change', e.target.innerText)
                },
                handleTouchStart () {
                this.touchStatus = true
                },
                handleTouchMove (e) {
                    if (this.touchStatus) {
                        const startY = this.$refs['A'][0].offsetTop
                        const touchY = e.touches[0].clientY - 79
                        const index = Math.floor((touchY - startY) / 20)
                        if (index >= 0 && index < this.letters.length) {
                            this.$emit('change', this.letters[index])
                        }
                    }
                },
                handleTouchEnd () {
                this.touchStatus = false
                }
  }
  }
  </script>
  
<style lang='stylus' scoped>
.list
    position:absolute
    right:0
    top:1.58rem
    bottom:0
    width:0.4rem
    display:flex
    flex-direction :column
    justify-content :center
    align-items:center

    .item
        line-height :.4rem
        color :#00bcd4

</style>